<template>
	<view>
		<!-- <image class="service" src="../static/headset.png"></image> -->
		<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll"> -->
			<view class="bigbox">
				<view class="box">
					<view class="smallbox flex">
						<logo pattern="1" :text="$t(info.location)"></logo>
						<view class="xiaomk">
							<!-- <view class="title">{{$t('company.xiaomi-tech')}}</view> -->
							<view class="title">{{$getLocaleField(info, 'company_name')}}</view>
							<view class="tag">{{info.symbol}}.{{info.location}}</view>
						</view>
					</view>
					<view class="publicbox flex">
						<view class="buy">{{$t('applybuy.remaining')}}</view>
						<view class="public">
							{{$t('start_time_after')}}
							<text class="number">{{info.distance_time[0]}}</text>
							{{$t('day')}} 
							<text class="number">{{info.distance_time[1]}}</text>
							{{$t('hour')}} 
							<text class="number">{{info.distance_time[2]}}</text>
							{{$t('minute')}} 
							{{$t('end_time_after')}}
						</view>
					</view>
					<picker :range="cashList" range-key="name" :value="cashIndex" @change="cashChange">
						<view class="publicbox flex">
							<view class="buy">{{$t('applybuy.subs-method')}}</view>
							<view class="public">{{cashList[cashIndex].name}}</view>
							<image class="right" src="@/static/black_back.png"></image>
						</view>
					</picker>
					<!-- <view class="publicbox flex">
						<view class="buy">{{$t('applybuy.available-cash')}}</view>
						<view class="public">{{info.AVBLCash.toLocaleString()}}(HKD)</view>
					</view> -->
					<picker :range="applyList" range-key="name" :value="applyIndex" @change="applyChange">
						<view class="publicbox flex">
							<view class="buy">{{$t('applybuy.subs-qty-amt')}}</view>
							<view class="public">
								{{applyList[applyIndex].name}}
								<!-- 1,000 {{$t('shares')}} 3,484.76 HKD -->
								<!-- {{$t('pool-a')}} -->
							</view>
							<image class="right" src="@/static/black_back.png"></image>
						</view>
					</picker>
					<!-- <view class="publicbox flex"> -->
						<!-- <view class="buy">{{$t('applybuy.max-available-funds')}}</view> -->
						<!-- <view class="public">2,000 HKD * 3 = 6,000 HKD</view> -->
						<!-- <view class="public">{{info.MaxAVBLCash.toLocaleString()}} HKD</view> -->
					<!-- </view> -->
				</view>
				<!-- <view class="boxtwo">
					<view class="hint">特别提示：</view>
					<view class="content">
						您需在申购截止日<text class="riqi">2018/06/27</text>之前， 需保证账户中的特别备忘录账户(SMA)或购买力>融资金额，否则PBNZ有权减少您的申购数量，或拒绝您的申购申请。
本次认购可在生效前修改或取消
					</view>
				</view> -->
				<view class="boxthree" :class="readMore?'show':''">
					<view class="hinttwo">{{$t('applybuy.reminder')}}</view>
					<view class="contenttwo">
{{$t('applybuy.reminder-text1')}}
{{$t('applybuy.reminder-text2')}}
{{$t('applybuy.reminder-text3')}}
{{$t('applybuy.reminder-text4')}}
					</view>
					<view @tap="readMore=true" class="read-more">{{$t('applybuy.read-more')}}</view>
				</view>
				<view class="hangao"></view>
				<wzh-btn
					v-if="!info.is_end"
					pattern="5"
					:text="$t('applybuy.next')"
					@invokeBtn="invokeBtn()"></wzh-btn>
				<view style="height: 60rpx;"></view>
			</view>
			
		<!-- </scroll-view> -->
		<tooltips-msg ref="message"></tooltips-msg>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				info:{
					distance_time:[]
				},
				cashList:[
					{
						type:'',
						name:this.$t('applybuy.please_select'),
					},
					{
						type:'financing',
						name:this.$t('applybuy.financing'),
					},
					{
						type:'cash',
						name:this.$t('applybuy.cash'),
					},
				],
				cashIndex:0,
				
				applyList:[
					{name:''}
				],
				applyIndex:0,
				readMore:0,
				
				id: 0,
				account_id: '',
				account_type: '',
				
			}
		},
		onLoad(opt){
			this.id = opt.id
			this.account_id = opt.account_id
			this.$appLogin(()=>{
				this.getInfo()
				this.getAccountType()
			})
		},
		methods: {
			invokeBtn () {
				var type = this.cashList[this.cashIndex].type
				if(!type){
					return this.$refs.message.open(this.$t('applybuy.cash_err_msg'), () => {
					},this.$t('applybuy.reminder'))
				}
				
				var money = this.applyList[this.applyIndex].money
				var num = this.applyList[this.applyIndex].num
				
				// // var limit_money = type == 'financing'?6000:2000;
				// var limit_money = type == 'financing'?this.info.MaxAVBLCash:this.info.AVBLCash
				// if(money > limit_money){
				// 	let str,title
				// 	if(this.$getLocale()=='zh-Hans'){
				// 		str = `抱歉，您账户当前的最大可认购金额，<span style='color:#FF0000'>${limit_money}港币</span>＜本次认购金额<span style='color:#FF0000'>${money}港币</span>，请额外存入资金或减少认购金额（如适用）。`
				// 		title = "温馨提示"
				// 	}else{
				// 		str = `Sorry, your own cash(Current Available Funds in trading account) are <span style='color:#FF0000'>${limit_money} HKD</span>, which MUST excesses minimum subscription of <span style='color:#FF0000'>${money} HKD</span>. Please deposit extra funds, lower your margin level(if applicable), or you may reduce subscriptions amount.`
				// 		title = "Notifications"
				// 	}
				// 	return this.$refs.message.open(str, () => {
				// 		// this.$Router.push({ path: '/order_details', query: {
				// 		// 	cash_type:this.cashList[this.cashIndex].type
				// 		// }})
				// 		// uni.navigateTo({
				// 		// 	url: '/order_details',
				// 		// 	data:{
				// 		// 		cash_type:this.cashList[this.cashIndex].type
				// 		// 	}
				// 		// })
				// 	},title)
				// }
				
				uni.navigateTo({
					url: '/order_details',
					data:{
						cash_type:type,
						money:money,
						num:num,
						id: this.id,
						account_id: this.account_id
					}
				})
			},
			cashChange(e){
				this.cashIndex = e.detail.value
			},
			applyChange(e){
				this.applyIndex = e.detail.value
			},
			getInfo(){
				this.$httpGet({
					url:'ipos/info',
					data:{
						id:this.id
					}
				}).then((res)=>{
					// console.log(this.$numConvert(10000),res.data.info.ExpIssuingQuantity)
					// res.data.info.ExpIssuingQuantity = this.$numConvert(res.data.info.ExpIssuingQuantity, uni.getLocale())
					res.data.info.distance_time = this.$getDistanceSpecifiedTime(res.data.info.application_end_date_time)
					this.info = res.data.info
					
					var _applyList = []
					// for(var i =1; i<=10; i++){
					// 	var _num = i * 100
					// 	var _money = parseInt(_num * (this.info.high_price_range || this.info.low_price_range))
					// 	_applyList.push({
					// 		num: _num,
					// 		money: _money,
					// 		name:_num+this.$t('shares')+' '+_money+' HKD',
					// 	})
					// }
					for(var i in this.info.allowed_quantity){
						var _num = parseInt(this.info.allowed_quantity[i])
						var _money = parseInt(_num * (this.info.high_price_range || this.info.low_price_range))
						_applyList.push({
							num: _num,
							money: _money,
							name: _num.toLocaleString()+this.$t('shares')+' '+_money.toLocaleString()+' '+this.info.ipo_fee_currency,
						})
					}
					this.applyList = _applyList
					
				})
			},
			getAccountType(){
				this.$httpGet({
					url:'ipos/get_account_type',
					data:{
						account_id:this.account_id
					}
				}).then((res)=>{
					this.account_type = res.data.account_type
					if(this.account_type && this.account_type.toUpperCase() == 'CASH'){
						this.cashList = [
							// {
							// 	type:'',
							// 	name:this.$t('applybuy.please_select'),
							// },
							{
								type:'cash',
								name:this.$t('applybuy.cash'),
							}
						]
					}
					else{
						this.cashList = [
							{
								type:'financing',
								name:this.$t('applybuy.financing'),
							}
						]
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: rgb(244,245,247);
}
// .service{
// 	position: absolute !important;
// 	height: 40rpx;
// 	width: 44rpx;
// 	right: 22rpx;
// 	top: -20rpx;
// }
.reserve{
	text-align: center;
	font-size: 32rpx;
	padding-top: 64rpx;
	color: rgb(54,54,54);
}
.box{
	// height: 492rpx;
	padding-bottom: 30rpx;
	margin-left: 18rpx;
	margin-right: 18rpx;
	margin-top: 22rpx;
	border-radius: 20rpx;
	background-color: rgb(255,255,255);
}
.smallbox{
	padding-top: 30rpx;
	margin-left: 32rpx;
	margin-right: 32rpx;
	padding-bottom: 22rpx;
	border-bottom: rgb(244,245,247) 1rpx solid;
}
.redbox{
	width: 60rpx;
	height: 60rpx;
	font-size: 30rpx;
	border-radius: 8rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgb(252,79,79);
	background-color: rgb(255,207,207);
}
.xiaomk{
	margin-left: 76rpx;
	margin-top: -68rpx;
}
.title{
	color: $font-color-two;
	font-size: 28rpx;
}
.tag{
	color: $font-color-one;
	// font-size: 20rpx;
	height: 20rpx;
	font-size: 40rpx;
	transform: scale(0.5);
	transform-origin: left top;
}
.timebox{
	margin-left: 32rpx;
	margin-right: 32rpx;
	margin-top: -18rpx;
}
.buy{
	font-size: 26rpx;
	color: $font-color-one;
	width: 216rpx;
	flex-shrink: 0;
}
.public{
	font-size: 26rpx;
	color: $font-color-two;
	flex-grow: 1;
}
.number{
	color: rgb(255,84,84);
}
.publictwo{
	position: absolute;
	margin-top: -39rpx;
	margin-left: 216rpx;
	font-size: 26rpx;
	color: $font-color-two;
}
.publicbox{
	margin-left: 32rpx;
	margin-right: 32rpx;
	margin-top: 4rpx;
	flex-grow: 1;
	height: 56rpx;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: space-between;
}
.right{
	height: 56rpx;
	width: 50rpx;
}
// .righttwo{
// 	position: absolute;
// 	height: 56rpx;
// 	width: 50rpx;
// 	right: 30rpx;
// 	top: 340rpx;
// }
.boxtwo{
	// height: 246rpx;
	padding-bottom: 28rpx;
	background-color: rgb(255,255,255);
	margin-left: 18rpx;
	margin-right: 18rpx;
	margin-top: 22rpx;
	border-radius: 20rpx;
}
.boxthree{
	// height: 718rpx;
	padding-top: 10rpx;
	padding-bottom: 28rpx;
	background-color: rgb(255,255,255);
	margin-left: 18rpx;
	margin-right: 18rpx;
	margin-top: 22rpx;
	border-radius: 20rpx;
	margin-bottom: 48rpx;
	position: relative;
	height: 400rpx;
	overflow: hidden;
	
	.read-more{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		padding-top: 100rpx;
		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%);
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgb(255,84,84);
	}
}
.boxthree.show{
	height: unset;
	overflow: unset;
	.read-more{
		display: none;
	}
}

.hint{
	margin-left: 32rpx;
	padding-top: 30rpx;
	font-size: 24rpx;
	color: $font-color-three;
}
.hinttwo{
	margin-left: 32rpx;
	padding-top: 14rpx;
	font-size: 24rpx;
	color: $font-color-three;
}
.content{
	margin-top: 6rpx;
	margin-left: 32rpx;
	margin-right: 28rpx;
	white-space: pre-wrap;
	color: $font-color-one;
	font-size: 24rpx;
	line-height: 46rpx;
}
.contenttwo{
	margin-left: 32rpx;
	margin-top: 6rpx;
	margin-right: 28rpx;
	white-space: pre-wrap;
	color: $font-color-one;
	font-size: 24rpx;
	line-height: 46rpx;
}
.hangao{
	height: 2rpx;
}
.riqi{
	color: rgb(255,84,84);
}

.bigbox{
	max-height: 1360rpx;
}

</style>
